<style lang="less">
  /*整根竖线*/
  .m_item:before {
    position: absolute;
    display: block;
    width: .28rem;
    border-radius: .3rem;
    height: 101%;
    left: -38px;
    top: 1.26rem;
    content: "";
  }
  /*竖线的颜色*/
  .m_item:before {
    background: #ebedf2;
  }
  .m_item {
    margin-left:122px;position: relative;
  }
  .time_1 {
    position: absolute;left: -142px;top: 44px;
  }
  .time_2 {
    position: absolute;left: -123px;top:72px;font-size: 22px;color: black;
  }
  .item-cricle{
    width:28px;height:28px;border-radius: 50%;border: 0.89rem solid white; top: 2.2rem;left: -3.18rem;position: relative;
  }
  .item-cricle i {
    font-size:1.78rem;color:#34bfa3 ;font-weight: 900;position:absolute;top:-0.93rem;left:-0.57rem;
  }
  .m__item_text {
    color: #5E6D82;background: rgb(242, 242, 242);padding: 12px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100%;
  }
</style>
<template>
  <el-row class="base-follow-up" :gutter="15">
    <el-col :md="12" :xs="24">
      <Portlet class="show">
        <el-form slot="header" ref="searchForm" :model="search">
          <el-row style="padding-top:15px;" :gutter="6">
            <el-col :span="4"><span>跟进记录</span></el-col>
            <el-col class="pull-right" :span="4">
              <el-button style="width:100%" @click="resetSearchForm">重置</el-button>
            </el-col>
            <el-col class="pull-right" :span="4">
              <el-button style="width:100%" type="primary" :loading="searchLoading" @click="searchFunc(search)">搜索</el-button>
            </el-col>
            <!--若 传了type进来,则为该类型的跟进，只搜索：跟进内容-->
            <el-col class="pull-right" :span="6" >
              <el-form-item>
                <el-select v-model="search.followType" clearable placeholder="跟进内容">
                  <el-option
                    v-for="item in followTypeArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--若 没传type,则为订单类的跟进，搜索：跟进类型+跟进内容-->
            <el-col class="pull-right" :span="6"  v-if="!objectType">
              <el-form-item>
                <el-select v-model="search.objectType" clearable placeholder="跟进类型">
                  <el-option v-for="item in typeArr" :label="item.text" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div style="padding-left:2%;margin-top:-36px;">
          <div class="m_item" v-for="item in followUpData" :key="item.value">
            <span class="time_1">{{ item.foundtime | unixTimestampFilter('YYYY/MM/DD') }}</span>
            <span class="time_2">{{ item.foundtime | unixTimestampFilter('HH:mm')}}</span>
            <br>
            <!--圈圈-->
            <div class="item-cricle">
              <i class="fa fa-genderless"></i>
            </div>
            <!--右侧文字-->
            <div class="m__item_text">
              <span style="padding-right:20px;">下次跟进: {{ item.nextTime | unixTimestampFilter('YYYY-MM-DD')}}</span>
              <div style="float:right">
                    <span class="pull-right timeline-body-time">
                    {{ item.objectType | filterDataBaseDictionary }} ：{{ item.followType | filterDataBaseDictionary}}
                    </span>
              </div>
              <!--<p>-->
              <!--<span style="float:left">跟进内容：<span style="height:auto;word-break:break-all">{{ item.followType | filterDataBaseDictionary }}</span></span>-->
              <!--<span style="float:right">三天未完：<span style="height:auto;word-break:break-all">{{item.threenofinish | filterDataBaseDictionary}}</span></span>-->
              <!--</p>-->
              <p class="clearfix"></p>
              <div>
                <span>跟进说明：</span>
                <span style="height:auto;word-break:break-all">{{ item.followContent}}</span>
                <div class="m-t-2" style="margin-top:14px;">跟进附件：</div>
                <div class="m-t-10">
                  <Upload-image :formData="{}" :readonly="true" :value="getImage(item.followPicture)"></Upload-image>
                </div>
              </div>
            </div>
          </div>
          <Pagination style="margin-top: 15px" class="pull-right" :total-item="totalItem" @pagination="page"
                      :perItem="params.pageSize"
                      @sizeChange="setSizeChange"></Pagination>
        </div>

        <!--<div class="row" style="float:right;">-->
          <!--<Pagination :total-item="totalItem" @pagination="page" :perItem="params.pageSize"-->
                      <!--@sizeChange="setSizeChange"></Pagination>-->
        <!--</div>-->
        <div class="clearfix"></div>
      </Portlet>
    </el-col>

    <el-col :md="12" :xs="24">
      <Portlet title="跟进">
        <el-form ref="followUpForm" :model="model" label-width="112px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="下次跟进时间:" prop="nextTime"
                            :rules="[
                  {required: true, message: '时间必须', trigger: 'change'}
                ]"
              >
                <el-date-picker
                  v-model="model.nextTime"
                  type="date"
                  placeholder="下次跟进时间"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!--默认不传objectType ==是订单的跟进记录：显示下拉选项-->
            <el-col :span="12" v-if="!objectType">
              <el-form-item label="跟进类型:" prop="objectType"
                            :rules="[
                  {required: true, message: '跟进类型必选', trigger: 'change'}
                ]"
              >
                <el-select v-model="model.objectType" class="input-max-w" placeholder="请选择跟进类型">
                  <el-option v-for="item in typeArr" :label="item.text" :value="item.value"
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--如果不是'订单'的跟进记录：直接显示 类型-->
            <el-col :span="12" v-if="objectType">
              <el-form-item label="跟进类型:">
                <span>{{ objectType | filterDataBaseDictionary }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="跟进内容:" prop="followType"
                            :rules="[
                              {required: true, message: '跟进内容必须', trigger: 'change'}
                            ]"
              >
                <el-select v-model="model.followType" class="input-max-w" placeholder="请选择跟进内容">
                  <el-option v-for="item in followTypeArr" :label="item.text" :value="item.value"
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="followContent" label="跟进说明:"
                            :rules="[
                              {required: true, message: '跟进说明必须', trigger: 'change'}
                            ]"
              >
                <el-input type="textarea" :rows="5" v-model="model.followContent" placeholder="请输入跟进说明"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="跟进附件"
                prop="followPicture"
                :rules="{
                  required: true, message: '图片必须', trigger: 'change', type: 'array'
                }"
              >
                <upload-image v-model="model.followPicture" :formData="{group: id}" :max="2"
                              :singleMaxSize="524288"></upload-image>
                <span class="font-red">建议上传图片分辨率为 750x1334（正常二倍）,大小不超过0.5M</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="12" :offset="6">
              <el-button type="primary" :loading="loading" style="width:300px;" @click.prevent="submitFollowUp($event)">
                提   交
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </Portlet>
    </el-col>
  </el-row>
</template>
<script>
import {getSubDictListOfParentCode} from '@/utils/selectOptions'
import {copy, dotData, merge} from '@/utils'

export default {
  name: 'baseFhbFollowUp',
  props: {
    // 默认不传类型：即：选择类型
    objectType: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    },
    objectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      isOrderFollow: false,
      search: {
        objectType: '', // 搜索 跟进类型
        followType: '' // 搜索 跟进内容
      },
      totalItem: 1,
      params: {
        pageSize: 5,
        pageNum: 1,
        objectType: this.objectType,
        objectId: this.objectId
      },
      model: {
        objectType: this.objectType, // 选：类型 下拉框选中的值
        followType: '', // 选：内容 下拉框选中的值
        followContent: '', // 说明
        followPicture: [],
        nextTime: '',
        objectId: this.objectId || this.id,
        orderId: this.id
      },
      followTypeArr: [], // 右：跟进内容 下拉选项
      typeArr: [], // 右： 跟进类型 下拉选项
      followUpData: [],
      searchLoading: false
    }
  },
  created() {
    // 右：跟进内容
    getSubDictListOfParentCode('zhiyingOrderFollow').then(arr => {
      this.followTypeArr = arr
    })
    // 右：跟进类型
    getSubDictListOfParentCode('ALLZHIYINGFOLLOW').then(arr => {
      this.typeArr = arr
    })
    this.httpGetData()
  },
  methods: {
    searchFunc(search) {
      let searchParams = copy(search, true)
      this.params = merge(this.params, searchParams)
      if (!searchParams.objectType) {
        this.params.objectType = this.objectType
      }
      this.httpGetData()
    },
    httpGetData() {
      // 获取 All 跟进记录
      this.searchLoading = true
      this.params.orderId = this.id
      this.$ajax.table('/ms-follow-up-fahuobao/followUp/getFollowUpListBack', this.params).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.totalItem = dotData(response, 'totalItem')
          this.followUpData = dotData(response, 'data')
        }
      }).finally(_ => {
        this.searchLoading = false
      })
    },
    submitFollowUp($event) {
      this.$refs.followUpForm.validate().then(result => {
        if (result === false) {
          return
        }
        this.loading = true
        // let data = mapGetValue(copy(this.model, true))
        let data = copy(this.model, true)
        data.followPicture = data.followPicture.join(',')
        this.$ajax.post('/ms-follow-up-fahuobao/followUp/saveFollowUpBack', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.loading = false
            this.httpGetData()
            this.$confirm('跟进成功', '提示', {
              type: 'success',
              center: true,
              confirmButtonText: '确定',
              showCancelButton: false,
              closeOnClickModal: false
            }).then(_ => {
              this.loading = false
              this.resetForm()
            })
          } else {
            this.loading = false
          }
        })
      })
    },
    // 获取图片
    getImage(val) {
      if (Array.isArray(val)) {
        return val
      }
      if (typeof val === 'string' && val) {
        return val.split(',')
      }
      return []
    },
    // 重置提交表单
    resetForm() {
      this.$refs.followUpForm.resetFields()
    },
    // 重置搜索框
    resetSearchForm() {
      this.search.objectType = ''
      this.search.followType = ''
      this.$refs.searchForm.resetFields()
    },
    page(number) {
      this.params.pageNum = number
      this.httpGetData()
    },
    setSizeChange(size) {
      this.params.pageSize = size
      this.httpGetData()
    }
  }
}
</script>
